<template>
  <view>
    <view
      class="plan-item"
      :style="{ background: itemBackground, boxShadow: showBoxShadow ? '2rpx 2rpx 8rpx 0 rgba(0, 0, 0, .2)' : 'none' }"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <view class="my-patient" v-if="showPatient">
        <view class="img-box">
          <image
            class="img"
            :src="item.userPhoto"
            mode="aspectFill"
          />
        </view>
        <view class="info-box">
          <view class="info">
            <view class="name">{{ item.name || '' }}</view>
            <view class="sex">{{ item.sex ? item.sex === 1 ? '男' : '女' : '未知' }}</view>
            <view class="age">{{ item.age || '' }}岁</view>
          </view>
          <view class="label" v-if="item.remark">{{ item.remark || '' }}</view>
        </view>
      </view>
      <view class="title-box">
        <view class="plan-title">{{ item.title || '' }}</view>
        <view class="status">
          <view class="arrow"></view>
          <view
            class="text"
            :style="{
              background: statusConfig[item.planState || 'default'].bgColor
              }"
            >
            {{ statusConfig[item.planState].text || statusConfig['default'].text }}
          </view>
        </view>
      </view>
      <view class="content-box">
        <view class="other-info" v-for="(oItem, oIndex) in otherConfig" :key="oIndex">
          <view class="label">{{ oItem.label }}</view>
          <view class="value">
            {{ oItem.key ? item[oItem.key] || ''
            : (item[oItem.leftKey] || '') + '-' + (item[oItem.rightKey] || '') }}
            {{ oItem.unite || '' }}
          </view>
        </view>
      </view>
      <view class="bottom-btn">
        <view
          v-for="(bItem, bIndex) in btnConfig[item.planState]" :key="bIndex"
          class="detail-btn"
          @click="clickButton(item, bItem)"
        >{{ bItem.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'PlanList',
    data() {
      return {
        dataList: [],
        statusConfig: {
          1: { text: '进行中', bgColor: '#ffb958' },
          2: { text: '已反馈', bgColor: '#41BF67' },
          3: { text: '已完成', bgColor: '#41BF67' },
          'default': { text: '待开始', bgColor: '#999999' }
        }
      }
    },
    props: {
      planList: {
        type: Array,
        default: []
      },
      patientName: {
        type: String,
        default: ''
      },
      itemBackground: {
        type: String,
        default: '#FFF'
      },
      showPatient: { // 是否展示患者信息
        type: Boolean,
        default: false
      },
      showBoxShadow: {
        type: Boolean,
        default: false
      },
      otherConfig: {
        type: Array,
        default: [
          { label: '起止日期', leftKey: 'startDate', rightKey: 'endDate' },
          { label: '训练天数', key: 'effectiveDays', unite: '天' },
          // { label: '患者姓名', key: 'patientName' }
        ]
      },
      btnConfig: {
        type: Object,
        default: {
          1: [
            { name: '评估报告', funcName: 'clickToAssess' },
            { name: '详情', funcName: 'clickDetail' }
          ],
          2: [
            { name: '患者反馈', funcName: 'clickToReport' },
            { name: '评估报告', funcName: 'clickToAssess' },
            { name: '详情', funcName: 'clickDetail' }
          ],
          3: [
            { name: '患者反馈', funcName: 'clickToReport' },
            { name: '评估报告', funcName: 'clickToAssess' },
            { name: '详情', funcName: 'clickDetail' }
          ],
          'default': [
            { name: '详情', funcName: 'clickDetail' }
          ]
        }
      }
    },
    watch: {
      planList: {
        handler(newVal, oldVal) {
          this.dataList = uni.$u.deepClone(newVal)
        },
        deep: true
      }
    },

    created() {
      this.dataList = uni.$u.deepClone(this.planList)
    },

    methods: {
      clickButton(item, bItem) {
        this[bItem.funcName](item)
      },
      // 医师计划详情
      clickDetail(item) {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/plan/planDetail?id=${item.id}&patientName=${this.patientName}`
        })
      },
      // 医师端去评估
      clickAssess(item) {
        this.$emit('assess', item)
      },
      // 医师端查看患者反馈
      clickToReport(item) {
        uni.navigateTo({
          url: `/subPages/userTrainPlan/trainFeedback?planId=${item.id}&justView=${true}`
        })
      },
      // 医师端查看评估报告
      clickToAssess(item) {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/plan/assessReport?patientName=${this.patientName || item.name}&planId=${item.id}&justView=${true}`
        })
      },
      // 用户端详情
      clickUserDetail(item) {
        uni.navigateTo({
          url: `/subPages/userTrainPlan/trainPlanDetail?planId=${item.id}&title=${item.title}`
        })
      },
      // 用户端去反馈
      clickToFeedback(item) {
        uni.navigateTo({
          url: `/subPages/userTrainPlan/trainFeedback?planId=${item.id}`
        })
      },
      // 用户端我的评估报告
      clickMyAssess(item) {
        uni.navigateTo({
          url: `/subPages/userTrainPlan/myAssess?planId=${item.id}`
        })
      },
    }
  }
</script>
<style lang="scss">
  .plan-item {
    margin: 0 30rpx 30rpx;
    border-radius: 16rpx;
    .my-patient {
      display: flex;
      align-items: center;
      height: 90px;
      border-radius: 16rpx;
      background-color: #FFF;
      .img-box {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        overflow: hidden;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .info-box {
        flex: 1;
        margin: 0 20rpx;
        .info {
          display: flex;
          align-items: center;
          .name {
            font-size: 36rpx;
            font-weight: 500;
            color: #333;
          }
          .sex,
          .age {
            margin-left: 20rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #666;
          }
        }
        .label {
          display: inline-block;
          margin-top: 20rpx;
          padding: 8rpx 18rpx;
          font-size: 24rpx;
          font-weight: 400;
          border-radius: 8rpx;
          color: #4B84D4;
          background: rgba(75, 132, 212, .1);
        }
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60rpx;
        padding: 0 36rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        color: #FFF;
        background-color: #115BAA;
      }
    }
    .title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #E0E0E0;
      .plan-title {
        margin-left: 30rpx;
        padding: 34rpx 0;
        font-size: 32rpx;
        font-weight: 500;
      }
      .status {
        display: flex;
        align-items: center;
        .text {
          display: flex;
          align-items: center;
          height: 40rpx;
          padding: 0 30rpx 0 40rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #FFF;
        }
        .arrow {
          margin-right: -14rpx;
          border: 14rpx solid #FFF;
          transform: rotate(45deg);
        }
      }
    }
    .content-box {
      padding: 28rpx 30rpx 22rpx;
      .other-info {
        display: flex;
        align-items: center;
        margin: 16rpx 0 0;
        .label {
          margin-right: 54rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #999;
        }
        .value {
          flex: 1;
        }
      }
    }
    .bottom-btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 30rpx 14rpx;
      // .physician {
      //   display: flex;
      //   align-items: center;
      //   .physician-img {
      //     width: 48rpx;
      //     height: 48rpx;
      //     margin-right: 12rpx;
      //     border-radius: 24rpx;
      //     background-color: #115BAA;
      //   }
      // }
      .detail-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60rpx;
        padding: 0 36rpx;
        margin-right: 20rpx;
        border: 2rpx solid #115BAA;
        border-radius: 30rpx;
        color: #115BAA;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
</style>
